<!--
 * @Author: hfWang
 * @Date: 2023-02-07 21:00:10
 * @LastEditTime: 2023-02-07 23:11:47
 * @Description: file content
 * @FilePath: \whf_blog\docs\.vitepress\theme\MyTheme\MyNotFound.vue
-->
<template>
	<div class="NotFound">
		<h1 class="title">404</h1>
		<h1 class="title">世上本没有路，走的人多了也就成了路</h1>
		<div class="divider" />
		<blockquote class="quote">页面不存在，请确认链接是否正常</blockquote>
		<div class="action">
			<a class="link" href="/" aria-label="go to home"> 回到首页 </a>
		</div>
	</div>
</template>

<style scoped>
.NotFound {
	padding: 64px 24px 96px;
	text-align: center;
}

@media (min-width: 768px) {
	.NotFound {
		padding: 96px 32px 168px;
	}
}

.title {
	padding-top: 12px;
	letter-spacing: 2px;
	line-height: 20px;
	font-size: 20px;
	font-weight: 700;
}

.divider {
	margin: 24px auto 18px;
	width: 64px;
	height: 1px;
	background-color: var(--vp-c-divider);
}

.quote {
	margin: 0 auto;
	max-width: 500px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vp-c-text-2);
}

.action {
	padding-top: 20px;
}

.link {
	display: inline-block;
	border: 1px solid var(--vp-c-brand);
	border-radius: 16px;
	padding: 3px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vp-c-brand);
	transition: border-color 0.25s, color 0.25s;
}

.link:hover {
	border-color: var(--vp-c-brand-dark);
	color: var(--vp-c-brand-dark);
}
</style>
